<template>
	<div class="category-list">
		<el-menu active-text-color="#606266" text-color="#606266"  background-color="#fdf4f4">
			<el-menu-item index="all" @click="searchallfood">全部</el-menu-item>
			<div v-for="kind in foodkindlist" :key="kind.food_kind_id">
				<el-menu-item :index="kind.key" @click="searchbykind(kind.food_kind_id)">{{kind.food_kind_name}}</el-menu-item>
			</div>
		</el-menu>
	</div>
</template>

<script>
  import CategoryListService from "./CategoryListService";
  export default {
    name: "CategoryList",
	  data(){
      return{
        foodkindlist:[],
        selectkind:''
      }
	  },
	  methods:{
      searchbykind(kindid){
        this.$emit('f_back',kindid,1);
		  },
      searchallfood(){
        this.$emit('all_back',1);
      }
	  },
	  created() {
			CategoryListService.categoryService({

			},r=>{
			  this.foodkindlist=r.data.foodkindList;
			})
    }
  }
</script>

<style lang="less" scoped>
	
	.category-list{
		width: 190px;
		height: 100%;
		background-color: #fdf4f4;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		//border-radius: 5px
	}

</style>
